import * as icons from '../../utils/icons'
import is from '../../utils/is'
import delegates from '../../utils/delegates'
import {isMobile} from '../../utils/browser'
import domUtils from '../../utils/dom'

class Volume {
  constructor (player) {
    this.player = player

    delegates(this.player, this)
      .method('getMute')
      .method('setMute')
      .method('getVolume')
      .method('setVolume')

    this.initVolumeButton()

    if (isMobile()) {
      this.player.dom.volumeWrap.style.display = 'none'
    }
  }

  initVolumeButton () {
    // set volume icon and bar width
    this.setVolume(this.getVolume())

    const vWidth = 35

    const volumeMove = event => {
      const e = event || window.event
      const percentage =
        ((e.clientX || e.changedTouches[0].clientX) -
          domUtils.getElementViewLeft(this.player.dom.volumeBarWrap) -
          5.5) /
        vWidth
      this.setVolume(percentage)
    }
    const volumeUp = () => {
      document.removeEventListener(domUtils.nameMap.dragEnd, volumeUp)
      document.removeEventListener(domUtils.nameMap.dragMove, volumeMove)
      this.player.dom.volumeButton.classList.remove('dplayer-volume-active')
    }

    this.player.dom.volumeBarWrapWrap.addEventListener('click', event => {
      const e = event || window.event
      const percentage =
        ((e.clientX || e.changedTouches[0].clientX) -
          domUtils.getElementViewLeft(this.player.dom.volumeBarWrap) -
          5.5) /
        vWidth
      this.player.setVolume(percentage)
    })
    this.player.dom.volumeBarWrapWrap.addEventListener(
      domUtils.nameMap.dragStart,
      () => {
        document.addEventListener(domUtils.nameMap.dragMove, volumeMove)
        document.addEventListener(domUtils.nameMap.dragEnd, volumeUp)
        this.player.dom.volumeButton.classList.add('dplayer-volume-active')
      }
    )
    this.player.dom.volumeIcon.addEventListener('click', () => {
      if (this.player.dom.video.muted) {
        this.setMute(false)
        this.switchVolumeIcon()
        this.setBarWidth(this.getVolume() * 100 + '%')
      } else {
        this.setMute(true)
        this.switchVolumeIcon(icons.volumeOff)
        this.setBarWidth(0)
      }
    })
  }

  getMute () {
    return this.player.dom.video.muted
  }

  setMute (muted = true) {
    this.player.dom.video.muted = !!muted
    this.player.trigger('mute', {type: 'mute', mute: !!muted})
  }

  getVolume () {
    if (this.getMute()) {
      return 0
    }
    return this.player.dom.video.volume
  }

  setVolume (volume) {
    const muted = this.player.dom.video.muted
    const preVolume = this.player.dom.video.volume

    if (is('number', volume)) {
      if (volume < 0) {
        volume = 0
      }
      if (volume > 1) {
        volume = 1
      }
      this.setBarWidth(volume * 100 + '%')
      this.switchVolumeIcon()
      if (volume === preVolume) {
        return
      }
      this.player.dom.video.volume = volume
      this.player.trigger('volume', {type: 'volume', volume: volume})
      if (muted && volume > 0) {
        this.setMute(false)
      }
      if (!muted && volume === 0) {
        this.setMute(true)
      }
    }
  }

  setBarWidth (width) {
    this.player.dom.volumeBar.style.width = width
  }

  switchVolumeIcon (icon) {
    const iconWrap = this.player.dom.volumeIcon
    if (icon) {
      iconWrap.innerHTML = icon
      return
    }
    if (this.getVolume() >= 0.95) {
      iconWrap.innerHTML = icons.volumeUp
    } else if (this.getVolume() > 0) {
      iconWrap.innerHTML = icons.volumeDown
    } else {
      iconWrap.innerHTML = icons.volumeOff
    }
  }
}

export default Volume
